<script setup>
import {ref} from "vue";
import VContextMenu from "../../components/menu/VContextMenu.vue";

const data = ref([
  {
    label: '第1行', value: '1'
  },
  {
    label: '第2行', value: '2'
  },
  {
    label: '第3行', value: '3'
  },
  {
    label: '第4行', value: '4'
  }
]);

const vContextMenuRef = ref(null);
// 当前点击的数据
const currentContextMenuData = ref(null);
// 定义菜单项
const contextMenuItems = ref([
  {label: '查看详情', action: (data) => handleClick(data)},
  {label: '修改密码', action: (data) => handleClick(data)},
  {label: '个人设置', action: (data) => handleClick(data)},
  {label: '退出登录', action: (data) => handleClick(data)},
]);
const openContextMenu = (event, data) => {
  currentContextMenuData.value = data;
  // 打开右键菜单
  vContextMenuRef.value.open(event, data.value);
};

// 处理回调寒素
const handleClick = (item) => {
  console.log('数据：', item);
};
</script>

<template>
  <div>
    <div class="v-box">
      <ul>
        <li @contextmenu.prevent="openContextMenu($event, item)" v-for="item in data" :key="item.value">{{
            item.label
          }}
        </li>
      </ul>
    </div>
    
    
    <!-- 引入右键菜单组件 -->
    <VContextMenu ref="vContextMenuRef" :items="contextMenuItems" :data="currentContextMenuData"/>
  </div>
</template>

<style scoped>
.v-box {
  width: 200px;
  height: 300px;
  box-sizing: border-box;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul {
  color: white;
  list-style: none;
}

li {
  cursor: pointer;
  margin: 10px;
  padding: 10px 30px;
  background-color: #2a64a6;
}
</style>